<template>
  <div>
    <div class="container">
      <div class="swiper" v-swiper:indexSwiper="indexSwiperOption">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in bannerData"
            :key="index"
          >
            <img :src="item.thumb" alt="" class="banner-swiper" />
            <div class="c_buttonview animated fadeInUp">
              <div
                class="c_f2"
                :style="{ color: item.title_color, fontSize: item.title_size }"
              >
                {{ item.title }}
              </div>
              <div
                class="c_f3"
                :style="{ color: item.desc_color, fontSize: item.desc_size }"
              >
                {{ item.desc }}
              </div>
              <el-button class="c_button" @click="dialogFormVisible = true">{{
                $t("方案咨询")
              }}</el-button>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="c_content">
        <!-- 顶部图片 -->
        <div class="c_hexin">
          <div class="c_title">{{ HighlightData.title }}</div>
          <el-row :gutter="40">
            <el-col :span="8" v-for="item in HighlightData.list" :key="item.id">
              <div
                class="c_card hvr-grow-shadow"
                @mouseenter="HighlightIndex = item.id"
                @mouseleave="HighlightIndex = 0"
              >
                <img
                  class="c_card_img"
                  :src="HighlightIndex == item.id ? item.image : item.thumb"
                  alt=""
                />
                <div class="c_card_f1">{{ item.title }}</div>
                <div class="c_card_f2">{{ item.content }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 亮点功能 -->
        <div class="c_hexin">
          <div class="c_title">{{ ScenarioData.title }}</div>
          <el-row :gutter="20">
            <el-col
              :span="24"
              v-for="(item, index) in ScenarioData.list"
              :key="item.id"
            >
              <div class="c_full" :class="{ c_reverse: index % 2 == 1 }">
                <img
                  class="c_full_img"
                  :class="{ c_radius: index % 2 == 1 }"
                  :src="item.thumb"
                  alt=""
                />
                <div class="c_full_view hvr-wobble-skew">
                  <div class="c_full_f1">{{ item.title }}</div>
                  <div class="c_full_f2">{{ item.content }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 方案优势 -->
        <div class="c_hexin">
          <div class="c_title">{{ AdvantageData.title }}</div>
          <el-row :gutter="60">
            <el-col
              :span="12"
              v-for="item in AdvantageData.list"
              :key="item.id"
            >
              <div
                class="c_card hvr-grow-shadow"
                @mouseenter="AdvantageIndex = item.id"
                @mouseleave="AdvantageIndex = 0"
              >
                <img
                  class="c_card_img"
                  :src="AdvantageIndex == item.id ? item.image : item.thumb"
                  alt=""
                />
                <div class="c_card_f1">{{ item.title }}</div>
                <div class="c_card_f2">{{ item.content }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 开发对接流程 -->
        <div class="c_hexin">
          <div class="c_title">{{ ProcessData.title }}</div>
          <div class="c_kfdjlc">
            <div
              class="c_lc_card"
              v-for="(item, index) in ProcessData.list"
              :key="item.id"
            >
              <img :src="item.thumb" alt="" />
              <img
                class="c_lc_jt"
                src="~/assets/images/c_jticon.png"
                alt=""
                v-show="ProcessData.list.length - index - 1"
              />
            </div>
          </div>
        </div>
        <!-- 配套硬件产品 -->
        <div class="c_hexin">
          <div class="c_title">{{ ProductData.title }}</div>
          <el-row :gutter="20">
            <el-col :span="8" v-for="item in ProductData.list" :key="item.id">
              <div class="c_card1">
                <img class="c_card_img" :src="item.thumb" alt="" />
                <div class="c_card_f1">{{ item.title }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog
        :title="$t('请填写一下表单，我们会尽快与您联系')"
        :visible.sync="dialogFormVisible"
        width="1080rem"
        top="200rem"
        :center="true"
        :close-on-click-modal="false"
        custom-class="dialog-form"
      >
        <el-form :model="form" :rules="rules" :inline="true" ref="ruleForm">
          <el-form-item :label="$t('姓名')" prop="name">
            <el-input
              v-model="form.name"
              prop="name"
              :placeholder="$t('请输入姓名')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('邮箱')" prop="email">
            <el-input
              v-model="form.email"
              prop="email"
              :placeholder="$t('请输入邮箱号')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('电话')" prop="phone">
            <el-input
              v-model="form.phone"
              prop="phone"
              :placeholder="$t('请输入您的手机号')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('城市')" prop="city">
            <el-input
              v-model="form.city"
              prop="city"
              :placeholder="$t('请输入您所在城市')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('公司')" prop="company">
            <el-input
              v-model="form.company"
              prop="company"
              :placeholder="$t('请输入您的公司')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('职位')" prop="duty">
            <el-input
              v-model="form.duty"
              prop="duty"
              :placeholder="$t('请输入您的职位')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('其他')">
            <el-input
              type="textarea"
              v-model="form.content"
              :placeholder="$t('请输入其他内容')"
              maxlength="500"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="from-btn" type="primary" @click="submitForm">{{
            $t("提交")
          }}</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="container_mobile">
      <div v-if="!dialogFormVisible1">
        <div
          class="mobile-swiper"
          v-swiper:indexMobileSwiper="indexMobileSwiperOption"
        >
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in bannerData"
              :key="index"
            >
              <img :src="item.wap_thumb" alt="" class="banner-swiper" />
              <div class="c_buttonview animated fadeInUp">
                <div class="c_f2">{{ item.title }}</div>
                <div class="c_f3">{{ item.content }}</div>
                <el-button class="c_button" @click="dialogFormVisible1 = true"
                  >·{{ $t("方案咨询") }}</el-button
                >
              </div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <div class="c_content">
          <!-- 亮点功能 -->
          <div class="c_hexin">
            <div class="c_title">{{ HighlightData.title }}</div>
            <div
              class="c_card"
              v-for="item in HighlightData.list"
              :key="item.id"
            >
              <img class="c_card_img" :src="item.thumb" alt="" />
              <div class="card-text-box">
                <div class="c_card_f1">{{ item.title }}</div>
                <div class="c_card_f2">{{ item.content }}</div>
              </div>
            </div>
          </div>
          <!-- 应用场景 -->
          <div class="c_hexin">
            <div class="c_title">{{ ScenarioData.title }}</div>
            <div class="index-swiper" v-swiper:appSwiper="appSwiperOption">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="item in ScenarioData.list"
                  :key="item.id"
                  :style="{
                    background: 'url(\'' + item.wap_thumb + '\')',
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                  }"
                >
                  <div class="floor"></div>
                  <div class="c_full_view">
                    <div class="c_full_f1">{{ item.title }}</div>
                    <div class="c_full_f2">{{ item.content }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 方案优势 -->
          <div class="c_hexin">
            <div class="c_title">{{ AdvantageData.title }}</div>

            <div
              class="c_card"
              v-for="item in AdvantageData.list"
              :key="item.id"
            >
              <img class="c_card_img" :src="item.thumb" alt="" />
              <div class="card-text-box">
                <div class="c_card_f1">{{ item.title }}</div>
                <div class="c_card_f2">{{ item.content }}</div>
              </div>
            </div>
          </div>
          <!-- 开发对接流程 -->
          <div class="c_hexin">
            <div class="c_title">{{ ProcessData.title }}</div>
            <div
              class="process-swiper"
              v-swiper:processSwiper="processSwiperOption"
            >
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="item in ProcessData.list"
                  :key="item.id"
                >
                  <img :src="item.thumb" alt="" />
                </div>
              </div>
            </div>
          </div>
          <!-- 配套硬件产品 -->
          <div class="c_hexin">
            <div class="c_title">{{ ProductData.title }}</div>
            <div
              class="product-swiper"
              v-swiper:productSwiper="productSwiperOption"
            >
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="item in ProductData.list"
                  :key="item.id"
                >
                  <img class="c_full_img" :src="item.thumb" alt="" />
                  <div class="c_full_f1">{{ item.title }}</div>
                </div>
              </div>
            </div>
          </div>
          <div style="height: 38px"></div>
        </div>
      </div>
      <div v-else>
        <div class="c_banner">
          <img
            class="c_banner_img"
            src="~/assets/images/c_banner5.png"
            alt=""
          />
          <div class="c_buttonview2">
            <div class="c_f2">请填写一下表单,我们会尽快与您联系</div>
          </div>
        </div>
        <div class="form_mobile">
          <el-form :model="form" :rules="rules" ref="ruleForm">
            <el-form-item :label="$t('姓名')" prop="name">
              <el-input
                v-model="form.name"
                prop="name"
                :placeholder="$t('请输入姓名')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('邮箱')" prop="email">
              <el-input
                v-model="form.email"
                prop="email"
                :placeholder="$t('请输入邮箱号')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('电话')" prop="phone">
              <el-input
                v-model="form.phone"
                prop="phone"
                :placeholder="$t('请输入您的手机号')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('城市')" prop="city">
              <el-input
                v-model="form.city"
                prop="city"
                :placeholder="$t('请输入您所在城市')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('公司')" prop="company">
              <el-input
                v-model="form.company"
                prop="company"
                :placeholder="$t('请输入您的公司')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('职位')" prop="duty">
              <el-input
                v-model="form.duty"
                prop="duty"
                :placeholder="$t('请输入您的职位')"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('其他')">
              <el-input
                type="textarea"
                v-model="form.content"
                :placeholder="$t('请输入其他内容')"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn_mobile">
          <el-button class="from-btn" type="primary" @click="submitForm">{{
            $t("提交")
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (
        !/(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/.test(value) &&
        !/^(?:[\u4e00-\u9fa5·]{2,16})$/.test(value)
      ) {
        return callback(new Error(this.$t("请输入正确的姓名")));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      if (!/^[1][3,4,5,6.7,8,9][0-9]{9}$/.test(value)) {
        return callback(new Error(this.$t("请输入正确的电话号码")));
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      if (
        !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
          value
        )
      ) {
        return callback(new Error(this.$t("请输入正确的邮箱号")));
      } else {
        callback();
      }
    };
    var checkCompany = (rule, value, callback) => {
      if (/^\d+$/.test(value) || !value) {
        return callback(new Error(this.$t("请输入正确的公司名")));
      } else {
        callback();
      }
    };
    var checkDuty = (rule, value, callback) => {
      if (/^\d+$/.test(value) || !value) {
        return callback(new Error(this.$t("请输入正确的职位名")));
      } else {
        callback();
      }
    };
    return {
      indexSwiperOption: {
        //顶部轮播图
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        loop: false,
        autoplay: false,
        slidesPerView: 1,
        spaceBetween: 0,
        speed: 800,
      },
      indexMobileSwiperOption: {
        //顶部轮播图
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        loop: false,
        autoplay: false,
        slidesPerView: 1,
        spaceBetween: 0,
        speed: 800,
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        name: "",
        email: "",
        phone: "",
        city: "",
        company: "",
        duty: "",
        content: "",
      },
      rules: {
        name: [
          {
            required: true,
            validator: checkName,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            validator: checkEmail,
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            validator: checkPhone,
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            message: this.$t("请输入您所在城市"),
            trigger: "blur",
          },
        ],
        company: [
          {
            required: true,
            validator: checkCompany,
            trigger: "blur",
          },
        ],
        duty: [
          {
            required: true,
            validator: checkDuty,
            trigger: "blur",
          },
        ],
      },
      appSwiperOption: {
        loop: false,
        autoplay: false,
        slidesPerView: "auto",
        spaceBetween: 20,
      },
      processSwiperOption: {
        slidesPerView: "auto",
        spaceBetween: 0,
        centeredSlides: true,
      },
      productSwiperOption: {
        loop: false,
        autoplay: false,
        slidesPerView: "auto",
        spaceBetween: 10,
      },
      HighlightIndex: 0,
      AdvantageIndex: 0,
    };
  },
  async asyncData({ $indexApi }) {
    const bannerData = await $indexApi.getBannerData({ position: "solution" });
    const solutionData = await $indexApi.getSolutionData();

    // console.log(bannerData.data);

    return {
      bannerData: bannerData.data,
      HighlightData: solutionData.data[1],
      ScenarioData: solutionData.data[2],
      AdvantageData: solutionData.data[3],
      ProcessData: solutionData.data[4],
      ProductData: solutionData.data[5],
    };
  },
  methods: {
    async postMessage(data) {
      const res = await this.$indexApi.postMessageData(data);
      // console.log(res);
      if (res.code == 1) {
        this.$message({
          message: "恭喜你，提交成功！",
          type: "success",
        });
        this.form = {
          name: "",
          email: "",
          phone: "",
          city: "",
          company: "",
          duty: "",
          content: "",
        };
      }
    },
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          this.dialogFormVisible1 = false;
          // console.log(this.form);
          this.postMessage(this.form);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container {
    display: block;
    background: #f5f5f5;
  }

  .container_mobile {
    display: none;
  }
  .swiper {
    width: 100%;

    .swiper-slide {
      width: 100%;
      height: 800rem;
      position: relative;

      .banner-swiper {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .c_buttonview {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 232rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .c_button {
        margin-top: 80rem;
        width: 180rem;
        height: 66rem;
        line-height: 66rem;
        padding: 0;
        text-align: center;
        background: #333333;
        border-radius: 6rem;
        border: none;
        color: #fff;
        font-size: 30rem;
        font-weight: 300;
        font-family: Source Han Sans CN;
        transition: 0.6s;
        &:hover {
          background: #000;
        }
      }

      .c_f2 {
        font-size: 60rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }
      .c_f3 {
        font-size: 30rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .c_content {
    padding: 40rem 100rem 150rem 100rem;

    .c_hexin {
      .c_title {
        font-size: 54rem;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        margin: 120rem 0 100rem 0;
        text-align: center;
      }

      .c_card {
        width: 100%;
        height: 300rem;
        background: #ffffff;
        border-radius: 20rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        cursor: pointer;
        transition-duration: 0.3s;

        &:hover {
          box-sizing: border-box;

          .c_card_img {
            transform: scale(1.2);
          }
        }

        .c_card_img {
          width: 70rem;
          height: 70rem;
          transition: 0.6s;
        }

        .c_card_f1 {
          font-size: 30rem;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin: 30rem 0 20rem 0;
        }

        .c_card_f2 {
          font-size: 16rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          padding: 0 78rem;
        }
      }

      .c_reverse {
        flex-direction: row-reverse;
      }

      .c_full {
        display: flex;
        margin-bottom: 20px;
        background: #fff;
        border-radius: 20rem;
        overflow: hidden;
        &:hover {
          .c_full_img {
            transform: scale(1.2);
          }
        }

        .c_full_img {
          flex: 6;
          height: 500rem;
          border-radius: 20rem 0 0 20rem;
          transition: 0.6s;
        }

        .c_radius {
          border-radius: 0 20rem 20rem 0;
        }

        .c_full_view {
          flex: 4;
          padding: 0 190rem;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .c_full_f1 {
            font-size: 36rem;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #333333;
          }

          .c_full_f2 {
            margin-top: 20rem;
            font-size: 20rem;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #999999;
            line-height: 30rem;
          }
        }
      }

      .c_kfdjlc {
        display: flex;
        align-items: center;

        .c_lc_card {
          flex: 1;
          border-radius: 20rem;
          height: 400rem;
          background: #fff;
          margin-right: 52rem;
          position: relative;
          &:hover {
            img {
              transform: scale(1.2);
            }
          }

          &:last-child {
            margin-right: 0rem;
          }

          .c_lc_jt {
            width: 28rem;
            height: 20rem;
            position: absolute;
            right: -41rem;
            top: 50%;
          }

          img {
            width: 100%;
            height: 100%;
            transition: 0.6s;
          }
        }
      }

      .c_card1 {
        display: flex;
        flex-direction: column;
        height: 500rem;
        background: #fff;
        border-radius: 20rem 20rem 0 0;
        overflow: hidden;
        &:hover {
          .c_card_img {
            transform: scale(1.2);
          }
        }

        .c_card_img {
          width: 100%;
          height: 400rem;
          border-radius: 20rem 20rem 0 0;
          transition: 0.6s;
        }

        .c_card_f1 {
          line-height: 100rem;
          font-size: 26rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          text-align: center;
          margin-top: 20rem;
        }
      }
    }
  }

  :deep(.dialog-form) {
    padding: 47rem 76rem 31rem 75rem;
    background: #ffffff;
    border-radius: 20rem;
  }

  :deep(.el-dialog__title) {
    font-size: 26rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #333333;
  }

  :deep(.el-form--inline) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  :deep(.el-input__inner) {
    width: 300rem;
    height: 50rem;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 10rem;
  }

  :deep(.el-textarea__inner) {
    width: 780rem;
    height: 120rem;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 10rem;
  }

  .from-btn {
    width: 240rem;
    height: 60rem;
    background: #333333;
    border: none;
    border-radius: 10rem;
    font-size: 26rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    transition: 0.6s;
    &:hover {
      background: #000;
    }
  }
}

@media (max-width: 900px) {
  .container {
    display: none;
  }

  .container_mobile {
    display: block;
    background: #fafafa;

    .mobile-swiper {
      width: 100%;
      :deep(.swiper-pagination-bullet) {
        width: 21px;
        height: 1px;
        background: #606568;
        border-radius: 0px;
        margin: 0 18px;
      }
      :deep(.swiper-pagination-bullet-active) {
        background: #fff;
      }
      .swiper-pagination {
        bottom: 20px;
      }

      .swiper-slide {
        width: 100%;
        height: auto;

        .banner-swiper {
          width: 100%;
          // height: 750px;
          object-fit: cover;
        }
        .c_buttonview {
          position: absolute;
          top: 20%;
          left: 0;
          right: 0;
          margin: 0 auto;
          text-align: center;
          .c_f2 {
            font-size: 26px;
            font-family: Source Han Sans CN;
            color: #333333;
            margin: 0;
          }
          .c_f3 {
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #474747;
          }
          .c_button {
            display: inline-block;
            width: 105px;
            height: 35px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #333333;
            border-radius: 35px;
            background-color: rgba(0, 0, 0, 0);
            border: 1px solid #333333;
            padding: 0;
            margin-top: 20px;
          }
        }
      }
    }

    .c_banner {
      width: 100%;
      height: 240px;
      position: relative;

      .c_banner_img {
        width: 100%;
        height: 100%;
      }

      .c_buttonview2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .c_f2 {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    .c_content {
      padding: 0 15px;

      .c_hexin {
        .c_title {
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #333333;
          margin: 22px 0;
          text-align: center;
        }

        .c_card {
          width: 100%;
          background: #ffffff;
          box-shadow: 0px 0px 40px 0px rgba(197, 197, 197, 0.3);
          border-radius: 20px;
          padding: 34px 31px 39px 18px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          gap: 60px;
          margin-bottom: 30px;

          .c_card_img {
            width: 45px;
            height: 45px;
          }
          .card-text-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            flex: 1;
            .c_card_f1 {
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #333333;
            }

            .c_card_f2 {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 300;
              color: #333333;
            }
          }
        }

        .c_reverse {
          flex-direction: row-reverse;
        }

        .index-swiper {
          width: 100%;
          .swiper-slide {
            display: flex;
            flex-direction: column;
            width: 300px;
            height: 381px;
            background: #fff;
            border-radius: 8px;
            position: relative;
            .floor {
              width: 100%;
              height: 50%;
              position: absolute;
              bottom: 0;
              left: 0;
              background: linear-gradient(to top, #000, #000, rgba(0, 0, 0, 0));
              border-radius: 8px;
            }
            .c_full_view {
              display: flex;
              flex-direction: column;
              margin: 0 30px;
              padding-top: 270px;
              gap: 10px;
              z-index: 1;

              .c_full_f1 {
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #fff;
              }

              .c_full_f2 {
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 300;
                line-height: 20px;
                color: #999999;
              }
            }
          }
        }
        .product-swiper {
          width: 100%;
          .swiper-slide {
            display: flex;
            flex-direction: column;
            width: 168px;
            background: #fff;
            border-radius: 7px;
            align-items: center;

            .c_full_img {
              width: 100%;
              height: 118px;
              border-radius: 7px 7px 0 0;
            }
            .c_full_f1 {
              font-size: 13px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #333333;
              padding: 10px;
            }
          }
        }
        .process-swiper {
          width: 100%;
          .swiper-slide {
            width: 250px;
            transition: 300ms;
            transform: scale(0.8);
            img {
              width: 100%;
            }
          }
          .swiper-slide-active,
          .swiper-slide-duplicate-active {
            transform: scale(1);
          }
        }
      }
    }

    .form_mobile {
      padding: 0 10px;

      :deep(.el-input__inner) {
        width: 100%;
        height: 40px;
        background: #f7f7f7;
        border: none;
        border-radius: 7px;
      }

      :deep(.el-textarea__inner) {
        width: 100%;
        height: 100px;
        background: #f7f7f7;
        border: none;
        border-radius: 7px;
      }
    }

    .btn_mobile {
      display: flex;
      justify-content: center;
      padding: 38px 0;

      .from-btn {
        width: 300px;
        height: 43px;
        background: #333333;
        border: none;
        border-radius: 7px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #fefefe;
      }
    }
  }
}
</style>
